<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彩虹和花 - 情绪价值小程序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            transition: background 1s ease;
        }
        
        .container {
            text-align: center;
            padding: 20px;
        }
        
        h1 {
            color: #fff;
            margin-bottom: 40px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .heart-button {
            background: none;
            border: none;
            cursor: pointer;
            transition: transform 0.3s ease, filter 0.3s ease;
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .heart-button svg {
            width: 100%;
            height: 100%;
            fill: #ff4757;
            filter: drop-shadow(0 4px 6px rgba(255, 71, 87, 0.3));
            transition: fill 0.3s ease, filter 0.3s ease;
        }

        .heart-button:hover svg {
            fill: #ff3344;
            filter: drop-shadow(0 6px 8px rgba(255, 51, 68, 0.4));
        }

        .heart-button:hover {
            transform: scale(1.1);
            animation: heartbeat 0.8s ease-in-out infinite;
        }
        
        @keyframes heartbeat {
            0% { transform: scale(1); }
            14% { transform: scale(1.1); }
            28% { transform: scale(1); }
            42% { transform: scale(1.1); }
            70% { transform: scale(1); }
            100% { transform: scale(1); }
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 30px;
            border-radius: 20px;
            max-width: 600px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            animation: slideIn 0.5s;
        }
        
        @keyframes slideIn {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .close-btn {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s;
        }
        
        .close-btn:hover,
        .close-btn:focus {
            color: #ff4757;
            text-decoration: none;
        }
        
        .message {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        
        .flower-image {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .date-info {
            margin-top: 20px;
            color: #666;
            font-size: 14px;
        }
        
        footer {
            margin-top: 40px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>点击心形按钮获取今日惊喜</h1>
        <button class="heart-button" id="heartBtn">
            <svg viewBox="0 0 100 90" xmlns="http://www.w3.org/2000/svg">
                <path d="M50,3.5C30.5,3.5,15,18.7,15,38.5c0,22.1,24.3,38.9,42.8,52.5c0.6,0.4,1.3,0.6,2.1,0.6s1.5-0.2,2.1-0.6C60.7,77.4,85,60.6,85,38.5
                    C85,18.7,69.5,3.5,50,3.5z M50,74.2c-18.2-13.6-35.8-29.1-35.8-40.1c0-15.5,13.9-25.6,25.8-25.6s25.8,10.1,25.8,25.6
                    C85.8,45.1,68.2,60.6,50,74.2z"/>
            </svg>
        </button>
    </div>
    
    <div class="modal" id="modal">
        <div class="modal-content">
            <span class="close-btn" id="closeBtn">&times;</span>
            <p class="message" id="message"></p>
            <img class="flower-image" id="flowerImage" alt="花朵图片">
            <p class="date-info" id="dateInfo"></p>
        </div>
    </div>
    
    <footer>Rainbow and Flower - 为你带来每日好心情</footer>
    
    <!-- 引入数据文件 -->
    <script src="data.js"></script>
    
    <script>
        // 获取DOM元素
        const heartBtn = document.getElementById('heartBtn');
        const modal = document.getElementById('modal');
        const closeBtn = document.getElementById('closeBtn');
        const message = document.getElementById('message');
        const flowerImage = document.getElementById('flowerImage');
        const dateInfo = document.getElementById('dateInfo');
        
        // 生成随机背景色渐变的函数
        function getRandomBackground() {
            const colors = [
                ['#ff9a9e', '#fad0c4'],
                ['#a18cd1', '#fbc2eb'],
                ['#fbc2eb', '#a6c1ee'],
                ['#84fab0', '#8fd3f4'],
                ['#ffecd2', '#fcb69f'],
                ['#d4fc79', '#96e6a1'],
                ['#e0c3fc', '#8ec5fc'],
                ['#f093fb', '#f5576c']
            ];
            const randomIndex = Math.floor(Math.random() * colors.length);
            return `linear-gradient(135deg, ${colors[randomIndex][0]} 0%, ${colors[randomIndex][1]} 100%)`;
        }
        
        // 显示模态框的函数
        function showModal() {
            // 从data.js获取今天的彩虹屁文本
            const rainbowText = getRainbowTextByDate();
            
            // 从data.js获取今天的花朵图片
            const imagePath = getFlowerImageByDate();
            
            // 获取当前日期信息
            const now = new Date();
            const dateStr = now.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
            
            // 设置模态框内容
            message.textContent = rainbowText;
            flowerImage.src = imagePath;
            dateInfo.textContent = `—— ${dateStr} 的专属美好 ——`;
            
            // 更换背景
            document.body.style.background = getRandomBackground();
            
            // 显示模态框
            modal.style.display = 'block';
        }
        
        // 关闭模态框的函数
        function closeModal() {
            modal.style.display = 'none';
        }
        
        // 事件监听器 - 点击心形按钮
        heartBtn.addEventListener('click', function() {
            showModal();
            
            // 添加点击动画效果
            heartBtn.style.animation = 'none';
            setTimeout(() => {
                heartBtn.style.animation = 'heartbeat 0.8s ease-in-out';
            }, 10);
        });
        
        // 事件监听器 - 点击关闭按钮
        closeBtn.addEventListener('click', closeModal);
        
        // 事件监听器 - 点击模态框外部关闭
        window.addEventListener('click', function(event) {
            if (event.target === modal) {
                closeModal();
            }
        });
        
        // 事件监听器 - ESC键关闭模态框
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape' && modal.style.display === 'block') {
                closeModal();
            }
        });
    </script>
</body>
</html>